import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { NzModalService } from 'ng-zorro-antd';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

import { Http } from '@angular/http';

import { Mp } from '../mp';
import { MpTpl } from '../mptpl';
import { DataService } from '../data.service';

@Component({
  selector: 'app-steps',
  templateUrl: './steps.component.html',
  styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {

  mps: Mp[] = [];

  mpTpls: MpTpl[] = [];

  sendHistory: any[] = [];

  current = 0;

  index = '请选择一个要发送的公众号';

  _isSpinning = false;

  constructor(
    private _message: NzMessageService,
    private confirmServ: NzModalService,
    private dataService: DataService,
    private http: Http,
    private httpc: HttpClient)  { }

  selectMp(mpid,queue) {

    if (queue > 1000){
      this.current  += 1;
      this.changeContent();

      this.dataService.getMpTpls(mpid).subscribe(
        (data) =>   {
          console.log('http', data);
          if (data) {
            this.mpTpls = data;
          }
          console.log(this.mpTpls);
        },
        response => {
          console.log('GET call in error', response);
        },
        () => {
          console.log('The GET observable is now completed.');
        });
    }else{
      //用户池少于1000,提醒导入用户数据
      this.confirmServ.warning({
        title: '用户池少于1000',
        content: '请导入用户数据后发送!'
      });

    }


  }

  spinningStart() {
    this._isSpinning = true;
  }

  spinningEnd() {
    this._isSpinning = false;
  }

  msgSend(mpid,tmpid) {
    this.current += 1;
    this.changeContent();
    let dataService = this.dataService;
    let spinningStart = this.spinningStart();
    let spinningEnd = this.spinningEnd();

    this.confirmServ.confirm({
    title  : '您是否确认要开始发送',
    content: '点击(确认)后无法撤销',
      onOk() {
        spinningStart;
        dataService.msgSend(mpid,tmpid)
          .subscribe((data) => {
            console.log(data);
            spinningEnd;
          })
      },
      onCancel() {
        console.log('cancel');
      }
    });
    }

    inputUser(mpid) {
      let dataService = this.dataService;
      let mpss = this.mps;
      let spinningStart = this.spinningStart();
      let spinningEnd = this.spinningEnd();
      this.confirmServ.confirm({
        title : '确定导入?',
        content : '如果用户池中存在用户,导入操作将不会清除现存用户,并导入新的用户数据!',
          onOk() {
            spinningStart;
            dataService.inputUser(mpid)
              .subscribe((data) => {
                console.log(data);
                //刷新数据
                // dataService.getMpList()
                //   .then(mps => mpss = mps)
                spinningEnd;
                window.location.reload();
              })
          },
          onCancel() {
            console.log('cancel');
          }
      })
    }


  pre() {
    this.current -= 1;
    this.changeContent();
  }

  next() {
    this.current += 1;
    this.changeContent();
    ///console.log(this.mpTpls$);

  }

  done() {
    this._message.success('done');
  }

  changeContent() {
    switch (this.current) {
      case 0: {
        this.index = '选择公众号';
        break;
      }
      case 1: {
        this.index = '选择模板';
        break;
      }
      case 2: {
        this.index = '';
        break;
      }
      default: {
        this.index = 'error';
      }
    }
  }




  ngOnInit() {
    this.dataService.getMpList()
      .then(mps => this.mps = mps);


    // this.http
    // .get(`http://www.baidu.com`)
    // .map( data => data )
    // .subscribe( data => { if (data) this.mpTpls = data; });
  }

}
